<template>
	<ul id="custom-legend">
		<li v-for="(item, ind) in data" :key="ind" class="legend-item" :data-series-name="item">
			<span></span>
			<span> {{ item }}</span>
		</li>
	</ul>
</template>

<script setup>
const data = ["正常发电", "限电", "停机", "异常"];

const props = defineProps(["myChart1", "myChart2"]);
function clickFn() {
	let eles = document.querySelectorAll("#custom-legend .legend-item");
	console.log("eles", props.myChart1, props.myChart2);

	eles.forEach(item => {
		console.log("item", item);

		item.addEventListener("click", function () {
			let seriesName = this.getAttribute("data-series-name");
			console.log("seriesName", seriesName);

			// 切换选中状态
			// myChart.dispatchAction({
			// 	type: "legendToggleSelect",
			// 	name: seriesName
			// });

			props.myChart1.dispatchAction({
				type: "legendToggleSelect",
				name: seriesName
			});
			props.myChart2.dispatchAction({
				type: "legendToggleSelect",
				name: seriesName
			});

			// 可选：改变当前元素样式以反映状态变化
			this.classList.toggle("selected");
		});
	});
}

onMounted(() => {
	setTimeout(() => {
		clickFn();
	}, 3000);
});
</script>

<style lang="scss" scoped>
ul {
	display: flex;
	justify-content: center;
	li {
		cursor: pointer;
		margin-right: 1cqb;
		span:nth-child(1) {
			display: inline-block;
			width: 8px;
			height: 8px;
			border-radius: 50%;
		}
		span:nth-child(2) {
			font-weight: 400;
			font-size: 13px;
			color: #8da3c1;
			margin-left: 6px;
		}
	}
	li:nth-child(1) {
		span:nth-child(1) {
			background: #50bbff;
		}
	}
	li:nth-child(2) {
		span:nth-child(1) {
			background: #2f56ef;
		}
	}
	li:nth-child(3) {
		span:nth-child(1) {
			background: #f5d023;
		}
	}
	li:nth-child(4) {
		span:nth-child(1) {
			background: #42bf54;
		}
	}

	li.selected {
		span:nth-child(1) {
			background: #8da3c1;
		}
	}
}
</style>
